<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.RollingChart.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.RollingChart.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.RollingChart.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;실시간&nbsp;순위&nbsp;변화를&nbsp;보여주는&nbsp;롤링&nbsp;차트&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	실시간&nbsp;순위&nbsp;변화를&nbsp;보여주는&nbsp;롤링&nbsp;차트&nbsp;컴포넌트
	
	@class&nbsp;jindo.RollingChart
	@extends&nbsp;jindo.UIComponent
	@uses&nbsp;jindo.Rolling
	@keyword&nbsp;rollingchart,&nbsp;롤링차트,&nbsp;차트,&nbsp;chart
**/
jindo.RollingChart&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.RollingChart.prototype&nbsp;*/
		
	_nIndexOfRolling&nbsp;:&nbsp;0,&nbsp;//현재&nbsp;롤링되고있는&nbsp;아이템의&nbsp;인덱스
	_bIsRolling&nbsp;:&nbsp;false,&nbsp;//롤링&nbsp;중인지&nbsp;여부

	/**
		롤링차트&nbsp;컴포넌트를&nbsp;생성한다.
		
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;기준&nbsp;엘리먼트
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;rollingchart-&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{String}&nbsp;[htOption.sDirection=&quot;down&quot;]&nbsp;롤링될&nbsp;방향
			&lt;ul&gt;
			&lt;li&gt;&quot;down&quot;&nbsp;:&nbsp;아래&lt;/li&gt;
			&lt;li&gt;&quot;up&quot;&nbsp;:&nbsp;위&lt;/li&gt;
			&lt;/ul&gt;
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=50]&nbsp;롤링을&nbsp;그려줄&nbsp;초당&nbsp;프레임수
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=300]&nbsp;롤링될&nbsp;시간
			@param&nbsp;{Number}&nbsp;[htOption.nRollingInterval=100]&nbsp;각&nbsp;롤링간의&nbsp;시간간격
			@param&nbsp;{String}&nbsp;[htOption.sUrl=&quot;&quot;]&nbsp;요청&nbsp;url
			@param&nbsp;{String}&nbsp;[htOption.sRequestType=&quot;jsonp&quot;]&nbsp;요청타입
			@param&nbsp;{String}&nbsp;[htOption.sRequestMethod=&quot;get&quot;]&nbsp;요청방식
			@param&nbsp;{Object}&nbsp;[htOption.htRequestParameter=null]&nbsp;요청&nbsp;파라미터
			@param&nbsp;{Number}&nbsp;[htOption.nRequestInterval=10000]&nbsp;새로운&nbsp;목록을&nbsp;가져올&nbsp;시간&nbsp;간격&nbsp;(ms)
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;초기화시&nbsp;activate&nbsp;여부
		@example
			var&nbsp;oRollingChart&nbsp;=&nbsp;new&nbsp;jindo.RollingChart(jindo.$(&#39;rolling_chart&#39;),&nbsp;{
				sDirection&nbsp;:&nbsp;&#39;down&#39;,&nbsp;//롤링될&nbsp;방향&nbsp;&quot;down&quot;&nbsp;||&nbsp;&quot;up&quot;
				nFPS&nbsp;:&nbsp;50,&nbsp;//롤링을&nbsp;그려줄&nbsp;초당&nbsp;프레임수
				nDuration&nbsp;:&nbsp;300,&nbsp;//롤링될&nbsp;시간
				nRollingInterval&nbsp;:&nbsp;50,&nbsp;//각&nbsp;롤링간의&nbsp;시간간격
				sUrl&nbsp;:&nbsp;&quot;test.php&quot;,&nbsp;//요청&nbsp;url
				sRequestType&nbsp;:&nbsp;&quot;jsonp&quot;,&nbsp;//요청타입
				sRequestMethod&nbsp;:&nbsp;&quot;get&quot;,&nbsp;//요청방식
				htRequestParameter&nbsp;:&nbsp;{&nbsp;p&nbsp;:&nbsp;11&nbsp;},&nbsp;//요청&nbsp;파라미터
				nRequestInterval&nbsp;:&nbsp;5000,&nbsp;//새로운&nbsp;목록을&nbsp;가져올&nbsp;시간&nbsp;간격&nbsp;(ms)
				bActivateOnload&nbsp;:&nbsp;true&nbsp;//(Boolean)&nbsp;초기화시&nbsp;activate&nbsp;여부
			}).attach({
				request&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//롤링될&nbsp;새로운&nbsp;목록을&nbsp;요청하기&nbsp;전에&nbsp;발생
					//oCustomEvent.stop();&nbsp;수행시&nbsp;요청하지&nbsp;않음
				},
				response&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//목록을&nbsp;성공적으로&nbsp;받아온&nbsp;이후에&nbsp;발생
					//이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	htResponseJSON&nbsp;:&nbsp;(HashTable)&nbsp;응답의&nbsp;JSON&nbsp;객체
					//}
					//oCustomEvent.stop();&nbsp;수행시&nbsp;새로&nbsp;받아온&nbsp;목록을&nbsp;업데이트&nbsp;하지&nbsp;않음
				},
				beforeUpdate&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//새&nbsp;목록을&nbsp;받아온&nbsp;후&nbsp;기존&nbsp;목록에&nbsp;적용하기&nbsp;이전에&nbsp;발생&nbsp;
					//oCustomEvent.stop();&nbsp;수행시&nbsp;새로&nbsp;받아온&nbsp;목록을&nbsp;업데이트&nbsp;하지&nbsp;않음
				},
				beforeRolling&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//새&nbsp;목록이&nbsp;추가되고&nbsp;각각의&nbsp;롤링이&nbsp;시작되기전&nbsp;발생.
					//이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nIndex&nbsp;:&nbsp;(Number)&nbsp;현재&nbsp;롤링될&nbsp;목록의&nbsp;번호
					//}
				},
				afterRolling&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//새&nbsp;목록이&nbsp;추가되고&nbsp;각각의&nbsp;롤링이&nbsp;종료된&nbsp;후&nbsp;발생.
					//이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nIndex&nbsp;:&nbsp;(Number)&nbsp;현재&nbsp;롤링된&nbsp;목록의&nbsp;번호
					//}
				},
				afterUpdate&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//모든&nbsp;롤링이&nbsp;끝난&nbsp;이후에&nbsp;발생
				}
			});
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		
		var&nbsp;htDefaultOption&nbsp;=&nbsp;{
			sClassPrefix&nbsp;:&nbsp;&#39;rollingchart-&#39;,&nbsp;//Default&nbsp;Class&nbsp;Prefix
			sDirection&nbsp;:&nbsp;&#39;down&#39;,&nbsp;//롤링될&nbsp;방향&nbsp;&quot;down&quot;&nbsp;||&nbsp;&quot;up&quot;
			nFPS&nbsp;:&nbsp;50,&nbsp;//롤링을&nbsp;그려줄&nbsp;초당&nbsp;프레임수&nbsp;
			nDuration&nbsp;:&nbsp;300,&nbsp;//롤링될&nbsp;시간
			nRollingInterval&nbsp;:&nbsp;100,&nbsp;//각&nbsp;롤링간의&nbsp;시간간격
			sUrl&nbsp;:&nbsp;&quot;&quot;,&nbsp;//요청&nbsp;url
			sRequestType&nbsp;:&nbsp;&quot;jsonp&quot;,&nbsp;//요청타입
			sRequestMethod&nbsp;:&nbsp;&quot;get&quot;,&nbsp;//요청방식
			htRequestParameter&nbsp;:&nbsp;null,&nbsp;//(Object)&nbsp;파라미터
			nRequestInterval&nbsp;:&nbsp;10000,&nbsp;//새로운&nbsp;목록을&nbsp;가져올&nbsp;시간&nbsp;간격&nbsp;(ms)
			bActivateOnload&nbsp;:&nbsp;true&nbsp;//(Boolean)&nbsp;초기화시&nbsp;activate&nbsp;여부
		};
		
		this.option(htDefaultOption);
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._el&nbsp;=&nbsp;jindo.$(el);

		this._assignHTMLElements();&nbsp;//컴포넌트에서&nbsp;사용되는&nbsp;HTMLElement들을&nbsp;선언하는&nbsp;메서드
		this._initTimer();
		this._initRolling();
		
		if&nbsp;(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();&nbsp;//컴포넌트를&nbsp;활성화한다.
		}
	},

	/**
		컴포넌트에서&nbsp;사용되는&nbsp;HTMLElement들을&nbsp;선언하는&nbsp;메서드
	**/
	_assignHTMLElements&nbsp;:&nbsp;function()&nbsp;{
		this._elList&nbsp;=&nbsp;jindo.$$.getSingle(&quot;ol&quot;,&nbsp;this._el);
		this._aItems&nbsp;=&nbsp;jindo.$$(&quot;&gt;&nbsp;li&quot;,&nbsp;this._elList);
	},
	
	/**
		챠트의&nbsp;리스트&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getList
		@return&nbsp;{HTMLElement}
	**/
	getList&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elList;
	},
	
	/**
		챠트&nbsp;리스트의&nbsp;아이템&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getItems
		@return&nbsp;{HTMLElement}
	**/
	getItems&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._aItems;
	},
	
	/**
		각&nbsp;챠트&nbsp;리스트&nbsp;아이템에&nbsp;롤링을&nbsp;위한&nbsp;리스트를&nbsp;가져온다.
		
		@method&nbsp;getListOfItem
		@param&nbsp;{HTMLElement}&nbsp;elItem
	**/
	getListOfItem&nbsp;:&nbsp;function(elItem)&nbsp;{
		return&nbsp;jindo.$$.getSingle(&quot;ul&quot;,&nbsp;elItem);
	},
	
	/**
		챠트가&nbsp;롤링중인지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isRolling
		@return&nbsp;{Boolean}
	**/
	isRolling&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bIsRolling;	
	},
	
	_initTimer&nbsp;:&nbsp;function()&nbsp;{
		this._oRequestTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
	},
	
	/**
		일정&nbsp;간격으로&nbsp;Ajax&nbsp;요청을&nbsp;위한&nbsp;Timer&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getTimer
		@return&nbsp;{jindo.Timer}
	**/
	getTimer&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oRequestTimer;
	},
	
	_initRolling&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this;
		this._oRollingEventHandler&nbsp;=&nbsp;{
			&quot;end&quot;&nbsp;:&nbsp;function(){
				setTimeout(function(){
					/**
						새&nbsp;목록이&nbsp;추가되고&nbsp;각각의&nbsp;롤링이&nbsp;종료된&nbsp;후
						
						@event&nbsp;afterRolling
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{Number}&nbsp;nIndex&nbsp;현재&nbsp;롤링된&nbsp;목록의&nbsp;번호
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oRollingChart.attach(&quot;afterRolling&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					self.fireEvent(&quot;afterRolling&quot;,&nbsp;{&nbsp;nIndex&nbsp;:&nbsp;self._nIndexOfRolling&nbsp;});
					self._roll(self._nIndexOfRolling&nbsp;+&nbsp;1);	
				},&nbsp;self.option(&quot;nRollingInterval&quot;));
			}
		};
		this._oRolling&nbsp;=&nbsp;new&nbsp;jindo.Rolling(this._el,&nbsp;{
			nFPS&nbsp;:&nbsp;this.option(&quot;nFPS&quot;),
			nDuration&nbsp;:&nbsp;this.option(&quot;nDuration&quot;),
			sDirection&nbsp;:&nbsp;&#39;vertical&#39;,
			fEffect&nbsp;:&nbsp;jindo.Effect.linear
		});
	},
	
	/**
		롤링&nbsp;컴포넌트의&nbsp;인스턴스를&nbsp;가져온다.
		
		@method&nbsp;getRolling
		@return&nbsp;{jindo.Rolling}
	**/
	getRolling&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oRolling;
	},
	
	/**
		Rolling이&nbsp;적용될&nbsp;아이템을&nbsp;번호로&nbsp;정한다.&nbsp;//////////////&nbsp;
		@param&nbsp;{Number}&nbsp;n
		@ignore
	**/
	_setItemIndexToRolling&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;elList&nbsp;=&nbsp;this.getListOfItem(this.getItems()[n]);
		var&nbsp;oRolling&nbsp;=&nbsp;this.getRolling();
		oRolling._el&nbsp;=&nbsp;elList;
		oRolling._elList&nbsp;=&nbsp;elList;
	},

	/**
		컴포넌트를&nbsp;활성화한다.
		@return&nbsp;{this}
	**/
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this;

		this.getTimer().start(function(){
			self._stopRequest();
			self._request();
			return&nbsp;true;
		},&nbsp;this.option(&quot;nRequestInterval&quot;));
	},
	
	/**
		컴포넌트를&nbsp;비활성화한다.
		@return&nbsp;{this}
	**/
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		this.getTimer().abort();
	},
	
	/**
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@ignore
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;{String}&nbsp;sQuery&nbsp;쿼리.&nbsp;생략시&nbsp;현재&nbsp;입력된&nbsp;input의&nbsp;값
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;_request:&nbsp;function(sQuery){
		if&nbsp;(this.isRolling())&nbsp;{
			return;
		}
		
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;htOption&nbsp;=&nbsp;this.option();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sUrl&nbsp;=&nbsp;htOption.sUrl;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;htParameter&nbsp;=&nbsp;htOption.htRequestParameter;
		var&nbsp;self&nbsp;=&nbsp;this;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._oAjax&nbsp;=&nbsp;jindo.$Ajax(sUrl,&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;htOption.sRequestType,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method:&nbsp;htOption.sRequestMethod,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onload:&nbsp;function(oResponse){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{
					var&nbsp;htParam&nbsp;=&nbsp;{&nbsp;htResponseJSON&nbsp;:&nbsp;oResponse.json()&nbsp;};
					/**
						목록을&nbsp;성공적으로&nbsp;받아온&nbsp;이후
						
						@event&nbsp;response
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{Object}&nbsp;htResponseJSON&nbsp;응답의&nbsp;JSON&nbsp;객체
						@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;새로&nbsp;받아온&nbsp;목록을&nbsp;업데이트&nbsp;하지&nbsp;않음
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oRollingChart.attach(&quot;response&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					if(!self.fireEvent(&quot;response&quot;,&nbsp;htParam))&nbsp;{
						return;
					}
					
					/**
						새&nbsp;목록을&nbsp;받아온&nbsp;후&nbsp;기존&nbsp;목록에&nbsp;적용하기&nbsp;이전
						
						@event&nbsp;beforeUpdate
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;새로&nbsp;받아온&nbsp;목록을&nbsp;업데이트&nbsp;하지&nbsp;않음
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oRollingChart.attach(&quot;beforeUpdate&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					if(!self.fireEvent(&quot;beforeUpdate&quot;))&nbsp;{
						return;
					}
					
					var&nbsp;oChart&nbsp;=&nbsp;htParam.htResponseJSON;
					self._addItemToRolling(oChart);
					self.getRolling().getTransition().attach(self._oRollingEventHandler);
					self._roll(0);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch&nbsp;(e)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		/**
			롤링될&nbsp;새로운&nbsp;목록을&nbsp;요청하기&nbsp;전
			
			@event&nbsp;request
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;요청하지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oRollingChart.attach(&quot;request&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		if&nbsp;(!self.fireEvent(&quot;request&quot;))&nbsp;{
			return;
		}
		
		this._oAjax.request(htParameter);
&nbsp;&nbsp;&nbsp;&nbsp;},
	
	_stopRequest:&nbsp;function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._oAjax.abort();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._oAjax&nbsp;=&nbsp;null;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch&nbsp;(e)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
	},
	
	_addItemToRolling&nbsp;:&nbsp;function(oChart)&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;sDirection&nbsp;=&nbsp;this.option(&quot;sDirection&quot;);
		
		jindo.$A(this.getItems()).forEach(function(el,&nbsp;i){
			var&nbsp;wel&nbsp;=&nbsp;jindo.$Element(jindo.$(&quot;&lt;li&gt;&quot;));
			wel.html(oChart.items[i]);
			var&nbsp;elList&nbsp;=&nbsp;self.getListOfItem(el);
			if(sDirection&nbsp;==&nbsp;&quot;down&quot;)&nbsp;{
				elList.insertBefore(wel.$value(),&nbsp;elList.firstChild);
				elList.scrollTop&nbsp;=&nbsp;9999;
			}
			else&nbsp;{
				jindo.$Element(elList).append(wel.$value());
				elList.scrollTop&nbsp;=&nbsp;0;	
			}
		});
	},
	
	_removeItemRolled&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;sDirection&nbsp;=&nbsp;this.option(&quot;sDirection&quot;);
		
		jindo.$A(this.getItems()).forEach(function(el,&nbsp;i){
			if(sDirection&nbsp;==&nbsp;&quot;down&quot;)&nbsp;{
				jindo.$Element(jindo.$$(&quot;li&quot;,&nbsp;self.getListOfItem(el))[1]).leave();
			}
			else&nbsp;{
				var&nbsp;elList&nbsp;=&nbsp;self.getListOfItem(el);
				jindo.$Element(jindo.$$.getSingle(&quot;li&quot;,&nbsp;elList)).leave();
				elList.scrollTop&nbsp;=&nbsp;0;	
			}
			
		});
		this._nIndexOfRolling&nbsp;=&nbsp;0;
	},

	_roll&nbsp;:&nbsp;function(n)&nbsp;{
		this._bIsRolling&nbsp;=&nbsp;true;
		this._nIndexOfRolling&nbsp;=&nbsp;n;
		/**
			새&nbsp;목록이&nbsp;추가되고&nbsp;각각의&nbsp;롤링이&nbsp;시작되기전
			
			@event&nbsp;beforeRolling
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nIndex&nbsp;롤링될&nbsp;목록의&nbsp;번호
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oRollingChart.attach(&quot;beforeRolling&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;beforeRolling&quot;,&nbsp;{&nbsp;nIndex&nbsp;:&nbsp;n&nbsp;});
		var&nbsp;nIndex&nbsp;=&nbsp;n;
		if&nbsp;(nIndex&nbsp;==&nbsp;this.getItems().length)&nbsp;{
			this._removeItemRolled();
			this._nIndexOfRolling&nbsp;=&nbsp;0;
			this.getRolling().getTransition().detach(this._oRollingEventHandler);
			this._bIsRolling&nbsp;=&nbsp;false;
			/**
				새&nbsp;목록이&nbsp;추가되고&nbsp;각각의&nbsp;롤링이&nbsp;종료된&nbsp;후
				
				@event&nbsp;afterUpdate
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oRollingChart.attach(&quot;afterUpdate&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&quot;afterUpdate&quot;);
			return;
		}
			
		this._setItemIndexToRolling(nIndex);
		
		var&nbsp;nDistance&nbsp;=&nbsp;1;
		if&nbsp;(this.option(&quot;sDirection&quot;)&nbsp;==&nbsp;&quot;down&quot;)&nbsp;{
			nDistance&nbsp;=&nbsp;-1;
		}
		this.getRolling().moveBy(nDistance);
	}
}).extend(jindo.UIComponent);	</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>